<template>
  <div class="dashboard-editor-container">
    <!--  顶部轮播图  -->
    <el-carousel :interval="2000" type="card" height="400px" style="display: none">
      <el-carousel-item v-for="skillItem in skills" :key="skillItem.id">
        <el-row type="flex" class="row-bg" justify="center">
          <h1 class="medium">{{ skillItem.name }}</h1>
        </el-row>
        <el-image
            :style="{height:asideimgHeight}"
            style="width: 100%;"
            :src="skillItem.pic"
            fit="fill"
        >
        </el-image>
      </el-carousel-item>
    </el-carousel>

    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <!--  折线图  -->
    <el-row :gutter="20" type="flex" justify="center">
      <el-col :span="24" style="
      display: flex;
      justify-content: center;">
        <lineItem
            :seriesOpeion="lineData"
        ></lineItem>
      </el-col>
    </el-row>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

    <!--  中国地图及其右侧解释  -->
    <el-row :gutter="20" type="flex" justify="center" style="display: none">
      <el-col :span="14">
        <div ref="chart" id="ChinaMap" style="height: 320px; width: 550px;margin: 0px auto;"></div>
        <el-row type="flex" class="row-bg" justify="center" style="margin: 5px auto;">
          <el-button @click="remove" type="primary">返回中国地图</el-button>
        </el-row>
      </el-col>
      <el-col :span="10" style="
      display: flex;
      justify-content: center;">
        <el-collapse v-model="activeName" accordion style="width: 100%">
          <el-collapse-item title="一致性 Consistency" name="1">
            <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
            <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
          </el-collapse-item>
          <el-collapse-item title="反馈 Feedback" name="2">
            <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
            <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
          </el-collapse-item>
          <el-collapse-item title="效率 Efficiency" name="3">
            <div>简化流程：设计简洁直观的操作流程；</div>
            <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
            <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
          </el-collapse-item>
          <el-collapse-item title="可控 Controllability" name="4">
            <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
            <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
          </el-collapse-item>
        </el-collapse>
      </el-col>
    </el-row>
    <el-divider><i class="el-icon-mobile-phone"></i></el-divider>

    <!--  销量及日历  -->
    <el-row :gutter="20" type="flex" justify="center" style="margin-top: 20px">
      <el-col :span="16">
        <BarGraph width="100%" :height="'600px'"></BarGraph>
      </el-col>
      <el-col
          :span="8"
          style="
              display: flex;
              justify-content: center;"
      >
        <div class="calender">
          <el-calendar>
            <template
                slot="dateCell"
                slot-scope="{date, data}">
              <p :class="data.isSelected ? 'is-selected' : ''">
                {{ data.day.split('-').slice(1).join('-') }} {{ data.isSelected ? '✔️' : ''}}
              </p>
            </template>
          </el-calendar>
        </div>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import * as echarts from "echarts";   //引入echarts
import china from "@/assets/json/china.json";
import fujian from "@/assets/json/fujian.json";
import anhui from "@/assets/json/anhui.json";
import aomen from "@/assets/json/aomen.json";
import beijing from "@/assets/json/beijing.json";
import chongqing from "@/assets/json/chongqing.json";
import gansu from "@/assets/json/gansu.json";
import guangdong from "@/assets/json/guangdong.json";
import guangxi from "@/assets/json/guangxi.json";
import guizhou from "@/assets/json/guizhou.json";
import hainan from "@/assets/json/hainan.json";
import hebei from "@/assets/json/hebei.json";
import heilongjiang from "@/assets/json/heilongjiang.json";
import henan from "@/assets/json/henan.json";
import hubei from "@/assets/json/hubei.json";
import hunan from "@/assets/json/hunan.json";
import jiangsu from "@/assets/json/jiangsu.json";
import jiangxi from "@/assets/json/jiangxi.json";
import jilin from "@/assets/json/jilin.json";
import liaoning from "@/assets/json/liaoning.json";
import neimenggu from "@/assets/json/neimenggu.json";
import ningxia from "@/assets/json/ningxia.json";
import qinghai from "@/assets/json/qinghai.json";
import shandong from "@/assets/json/shandong.json";
import shanghai from "@/assets/json/shanghai.json";
import shanxi from "@/assets/json/shanxi.json";
import sichuan from "@/assets/json/sichuan.json";
import taiwan from "@/assets/json/taiwan.json";
import tianjin from "@/assets/json/tianjin.json";
import xianggang from "@/assets/json/xianggang.json";
import xinjiang from "@/assets/json/xinjiang.json";
import xizang from "@/assets/json/xizang.json";
import yunnan from "@/assets/json/yunnan.json";
import zhejiang from "@/assets/json/zhejiang.json";
import lineItem from "@/views/dashboard/lineItem.vue";
import BarGraph from "@/views/dashboard/BarGraph.vue";
import PanelGroup from './PanelGroup.vue'
import yuanshenpic from '@/assets/images/Suzuran.gif'
import Web3 from '@/assets/images/Web3.jpg'
import AxiosPic from '@/assets/images/Axios.jpg'
import ElementPlus from '@/assets/images/ElementPlus.jpg'
import Nodejs from '@/assets/images/Nodejs.jpg'
import VitePic from '@/assets/images/Vite.jpg'
import VuePic from '@/assets/images/Vue.png'

import {onMounted, reactive, ref, toRef} from "vue";
import {toReactive} from "@vueuse/core";


const chart = ref();

const activeName = ref("1")

// 用于动态控制el-image中的图片大小的变量
const asideimgHeight = ((document.body.clientHeight - 200) / 2) + "px"

const lineData = reactive({
  series: [
    {
      name: '访客',
      type: 'line',
      stack: 'Total',
      data: [120, 132, 101, 134, 90, 230, 210]
    },
    {
      name: '消息',
      type: 'line',
      stack: 'Total',
      data: [150, 232, 201, 154, 190, 330, 410]
    },
    {
      name: '金额',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    },
    {
      name: '订单',
      type: 'line',
      stack: 'Total',
      data: [820, 932, 901, 934, 1290, 1330, 1320]
    }
  ]
})

// 各省的地图数据
const mapData = [
  {name: "河北省", value: 10000},
  {name: "山西省", value: 9000},
  {name: "辽宁省", value: 4000},
  {name: "吉林省", value: 5000},
  {name: "黑龙江省", value: 6000},
  {name: "江苏省", value: 2000},
  {name: "浙江省", value: 800},
  {name: "安徽省", value: 2000},
  {name: "福建省", value: 4600},
  {name: "江西省", value: 3200},
  {name: "山东省", value: 200},
  {name: "河南省", value: 200},
  {name: "湖北省", value: 2060},
  {name: "湖南省", value: 3000},
  {name: "广东省", value: 2900},
  {name: "海南省", value: 2000},
  {name: "四川省", value: 2120},
  {name: "贵州省", value: 2350},
  {name: "云南省", value: 2000},
  {name: "陕西省", value: 2890},
  {name: "甘肃省", value: 2740},
  {name: "青海省", value: 2660},
  {name: "台湾省", value: 2440},
  {name: "内蒙古自治区", value: 2350},
  {name: "广西壮族自治区", value: 2700},
  {name: "西藏自治区", value: 2000},
  {name: "宁夏回族自治区", value: 2000},
  {name: "新疆维吾尔自治区", value: 2000},
  {name: "北京市", value: 2000},
  {name: "天津市", value: 2000},
  {name: "上海市", value: 2000},
  {name: "重庆市", value: 2000},
  {name: "香港特别行政区", value: 2000},
  {name: "澳门特别行政区", value: 2000},
  {name: "南海诸岛", value: 800},
];
// 用做点击完带到init方法的数据
const provinces = {
  台湾省: taiwan,
  河北省: hebei,
  山西省: shanxi,
  辽宁省: liaoning,
  吉林省: jilin,
  黑龙江省: heilongjiang,
  江苏省: jiangsu,
  浙江省: zhejiang,
  安徽省: anhui,
  福建省: fujian,
  江西省: jiangxi,
  山东省: shandong,
  河南省: henan,
  湖北省: hubei,
  湖南省: hunan,
  广东省: guangdong,
  海南省: hainan,
  四川省: sichuan,
  贵州省: guizhou,
  云南省: yunnan,
  陕西省: shanxi,
  甘肃省: gansu,
  青海省: qinghai,
  新疆维吾尔自治区: xinjiang,
  广西省: guangxi,
  内蒙古自治区: neimenggu,
  宁夏回族自治区: ningxia,
  西藏自治区: xizang,
  北京市: beijing,
  天津市: tianjin,
  上海市: shanghai,
  重庆市: chongqing,
  香港特别行政区: xianggang,
  澳门特别行政区: aomen,
};

const init = (name) => {
  // 获取图标 初始化
  const myChart = echarts.init(document.getElementById("ChinaMap"));

  // 图标指定数据
  echarts.registerMap(name, name);

  const option = {
    // 图标标题
    title: {
      text: "人员分布",
    },
    // 鼠标移入显示的内容
    tooltip: {
      trigger: "item",
      formatter: "{b}<br/>{c} (p / km2)",
    },
    // 数据视图
    toolbox: {
      show: true,
      orient: "vertical",
      left: "90%",
      top: "center",
      feature: {
        dataView: {readOnly: false},
        restore: {},
        saveAsImage: {},
      },
    },
    // 用于设置地图的高量
    visualMap: {
      min: 800,
      max: 5000,
      text: ["High", "Low"],
      // left:100,
      realtime: false,
      calculable: true,
      inRange: {
        color: ["lightskyblue", "yellow", "orangered"],
      },
    },
    geo: [
      {
        // 指定图标为地图
        type: "map",
        // 设置数据
        map: name,
        zoom: 1.2, // 改变这个值的大小就可以了
        // 开启缩放
        roam: true,
        // 设置缩放的大小
        scaleLimit: {
          min: 1.2,
          max: 30,
        },
      },
    ],
    series: [
      {
        type: "map",
        // 跟geo关联
        geoIndex: 0,
        // 设置人口的数据  用于显示在地图上
        data: mapData,
      },
    ],
  };

  // 把option设置给myChart实例
  myChart.setOption(option, true);


  // 点击切换到省份
  myChart.on("click", function (params) {
    // 拿到点击的哪一个省份 用provinces里面对象的数据带到init方法里面用于渲染省份
    init(provinces[params.name]);
  });
};

// 点击回到中国地图
function remove() {
  init(china);
}

// 加载完就调用的方法 vue3生命周期
onMounted(() => {
  init(china);
});

const skills = toReactive(
    [
      {
        id: 1,// 编号
        name: 'Web三剑客', // 技术名称
        pic: Web3,//展示图片
        details: 'HTML,CSS,JavaScript'//详细介绍
      },
      {
        id: 2,// 编号
        name: 'Vue', // 技术名称
        pic: VuePic,//展示图片
        details: '',//详细介绍
        childrens: [
          {
            id: 1,// 编号
            name: 'vue-quill', // 技术名称
            pic: '',//展示图片
            details: '富文本编辑器'//详细介绍
          },// TODO vue中使用的大量的插件库
        ]
      },
      {
        id: 3,// 编号
        name: 'ElementPlus', // 技术名称
        pic: ElementPlus,//展示图片
        details: '强大的组件库'//详细介绍
      },
      {
        id: 4,// 编号
        name: 'Axios', // 技术名称
        pic: AxiosPic,//展示图片
        details: '对传统ajax的封装，区别于jQuery对传统ajax的封装'//详细介绍
      },
      {
        id: 5,// 编号
        name: 'Vite', // 技术名称
        pic: VitePic,//展示图片
        details: '前端开发与构建工具'//详细介绍
      },
      {
        id: 6,// 编号
        name: 'Node.js', // 技术名称
        pic: Nodejs,//展示图片
        details: ''//详细介绍
      },
    ]
)

function handleSetLineChartData(type) {
  // lineChartDataItem.value = lineChartData[type]
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: #eceef0;
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}

.el-carousel__item h3 {
  color: #475669;
  font-size: 14px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n+1) {
  background-color: #d3dce6;
}
.el-collapse-item div {
  background-color: #e2e3e5;
  padding-left: 6%;
}
</style>
